<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading" v-if="config && config.title" v-cloak>
        <media-manager :show.sync="showMM" :file-types="['image']" @selected="bgImageSelected" :limit="1"></media-manager>
        <el-tabs v-model="activeTab">
            <!-- <el-tab-pane name="mode" label="模式">
                <el-form-item label="模式">
                    <el-radio v-model="config.mode" label="page">页面</el-radio>
                    <el-radio v-model="config.mode" label="component">组件</el-radio>
                    <el-radio v-model="config.mode" label="webview">嵌入网页</el-radio>
                </el-form-item>

                <el-form-item label="嵌入网址">
                    <el-input v-model="config.web_url" :disabled="config.mode != 'webview'"></el-input>
                </el-form-item>

            </el-tab-pane> -->


            <el-tab-pane label="标题栏" name="title" v-if="config.mode == 'page'">
                <el-form-item label="标题文字">
                    <el-input v-model="config.title.value" style="width: 250px" />
                </el-form-item>
                <el-form-item label="字体颜色">
                    <el-radio v-model="config.title.color" label="#ffffff">白色</el-radio>
                    <el-radio v-model="config.title.color" label="#000000">黑色</el-radio>
                </el-form-item>


                <el-form-item label="背景色">
                    <el-radio-group v-model="config.title.color_type">
                        <el-radio label="auto">自动</el-radio>
                        <el-radio label="custom">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="" >
                    <el-color-picker @active-change="bgColorChange" v-model="config.title.bgColor" v-if="config.title.color_type == 'custom'"
                        :predefine="predefineColors"></el-color-picker>
                </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="样式" name="bg">
                <el-form-item label="背景色">
                    <el-color-picker v-model="config.bg.color" :predefine="predefineColors"></el-color-picker>
                </el-form-item>

                <el-form-item label="背景图">
                    <image-picker v-model="config.bg.image" />
                </el-form-item>

                <el-form-item label="阴影设置">
                    <el-input v-model="config.shadowValue"></el-input>
                </el-form-item>

            </el-tab-pane>

            <el-tab-pane label="转发设置" v-if="config.mode != 'component'">
                <el-form-item label="转发文案">
                    <el-input v-model="config.shareTitle" :maxlength="20"></el-input>
                </el-form-item>

                <el-form-item label="转发配图">
                    <image-picker v-model="config.shareCover" />
                    <div style="font-size: 10px; color: #999">
                        <i class="el-icon-info"></i>
                        最佳图片尺寸 宽度400px，高度300px 或同比例
                    </div>
                </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="开屏广告" v-if="pageKey == 'home'">
                <OpenFlashEditor></OpenFlashEditor>
            </el-tab-pane>

            <el-tab-pane label="菜单" v-if="['home', 'faxian', 'myself', 'custom'].includes(pageKey)">
                <TabbarEditor></TabbarEditor>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<style scoped>
.colors {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
}

.icon-uploader {
    width: 100%;
}

.colors li {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 4px;
    display: block;
    margin-right: 4px;
    border: 1px solid #cecece;
}
</style>

<script>
import { updatePageConfi } from "@/api/page";
import LinkEditor from "@/components/LinkEditor";
import MediaManager from "@/components/MediaManager/Index";
import SliderInput from "@/components/SliderInput";
import ImagePicker from "@/components/ImagePicker";
import RadiusEditor from './ModuleStyleEditor/RadiusEditor.vue'
import OpenFlashEditor from './OpenFlashEditor/index.vue'
import TabbarEditor from "./TabbarEditor/index.vue";
export default {
    components: { LinkEditor, MediaManager, SliderInput, ImagePicker, RadiusEditor, OpenFlashEditor, TabbarEditor },

    data: function () {
        return {
            activeTab: "title",
            paths: [],
            showMM: false,
            loading: false,
            uploading: false,
            predefineColors: [
                "#f9f9f9",
                "#f4f4f4",
                "#cecece",
                "#ffffff",
                "#000000",
                "#1ABCA1",
                "#ff0000",
                "#1989fa",
            ],
        };
    },

    props: {},

    computed: {
        config: function () {
            return this.$store.state.pagemaker.pageConfig;
        },
        pageKey: function () {
            return this.$store.state.pagemaker.pageKey;
        },
    },

    mounted: function () { },

    methods: {
        bgImageSelected: function (imgs) {
            this.$set(this.config.bg, "image", imgs[0].url);
        },
        bgColorChange: function (val) { },

        adLinkChange: function (val) {
            console.log("ad link change", val);
            this.value.ad_link = val;
        },
        pathChange: function (value) {
            for (var i = 0; i <= this.paths.length - 1; i++) {
                var p = this.paths[i];
                if (p.value == value) {
                    this.config.ad_path = p.value;
                    this.config.ad_opentype = p.opentype || "redirect";
                }
            }
        },

        beforeAdImageUpload (file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            var res = isLt2M;

            if (!isLt2M) {
                this.$message.error("图片大小不能超过 2MB!");
            }
            this.uploading = true;
            return res;
        },

        adImageSuccess (url, file) {
            // 图片上传成功
            this.uploading = false;
            this.config.ad_image = url;
        },

        colorClickHandle: function (color) {
            var c = this.config;
            c["bg_color"] = color;
        },
    },
};
</script>
